<template>
  <div class="p_add">
    <div class="container">
      <div class="container_title" style="margin-bottom: 0">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">商品添加</span>
      </div>
      <div class="container_content">
        <Tabs :value="tabName" @on-click="clickTabs">
          <Tab-pane
            :label="item.title"
            :name="item.tabName"
            v-for="(item,index) in tagsList"
            v-if="item.showTag"
            :key="index">
            <div>
              <component :is="item.tabName" :name="tabName" @handleTags="handleTags"></component>
              <div class="handle_box">
                <Button v-if="index!==0" @click="lastStep(tabName)">上一步</Button>
                <Button type="primary" v-if="(index+1)!==tagsList.length" @click="nextStep(tabName)">下一步</Button>
                <Button type="primary" v-if="(index+1)===tagsList.length" @click="saveStep">保存</Button>
              </div>
            </div>
          </Tab-pane>
        </Tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import add_1 from './add_1.vue'
  import add_2 from './add_2.vue'
  import add_3 from './add_3.vue'
  import add_4 from './add_4.vue'
  import add_5 from './add_5.vue'
  import add_6 from './add_6.vue'
  import totalTags from '../../../apiData/totalTags.js'
  export default {
    name: "p_add",  // 商品添加
    data() {
      return {
        tabName: 'add_1',  // 默认
        tagId: null,
        totalTags: [],
        tagsList: []
      }
    },
    components: {
      add_1,
      add_2,
      add_3,
      add_4,
      add_5,
      add_6,
    },
    watch: {
      tagId: {
        handler(newVal) {
          switch (newVal) {
            case 0:
              this.tagsList = [...this.totalTags];
              break;
            default:
              this.tagsList = [...this.totalTags].filter(item => item.id !== 3);
              break;
          }
        },
        immediate: true
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.totalTags = totalTags;
        this.tagId = 0;
      },
      // 切换tabs
      clickTabs(e) {
        this.tabName = e
      },
      // 选择商品类型，更新tags
      handleTags(tagId) {
        this.tagId = tagId;
      },
      // 上一步
      lastStep(tabName) {
        let tag = this.tagsList.filter(item => item.tabName===tabName)[0];
        let showTags = this.tagsList.filter(item => item.id===(tag.id-1))[0];
        if(showTags && showTags.showTag) {
          this.tabName = showTags.tabName
        }
      },
      // 下一步
      nextStep(tabName) {
        let tag = this.tagsList.filter(item => item.tabName===tabName)[0];
        let showTags = this.tagsList.filter(item => item.id===(tag.id+1))[0];
        if(showTags && showTags.showTag) {
          this.tabName = showTags.tabName
        }
      },
      // 保存
      saveStep() {

      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .p_add {
    .container_content{
      padding: 16px;
      .handle_box{
        padding: 0 16px;
        Button{
          margin: 0 10px;
        }
      }
    }
  }
</style>
